<template>
  <div class="comPage">
    <el-form :model="formData" label-position="right" label-width="auto"  :rules="rules">
      <el-form-item label="关联疾病： ">
        <el-select v-model="formData.doctor_disease" placeholder="请选择关联疾病" clearable multiple>
          <el-option v-for="(o, ok) in diseaseOptions" :key="ok" :label="o.name" :value="o.id"  />
        </el-select>
      </el-form-item>
      <el-form-item label="擅长疾病： ">
        <el-input v-model="doctorDiagnoseName" placeholder="输入查询疾病分类/疾病名称" clearable readonly @click="openMedicineDialog" />
      </el-form-item>
      <el-form-item label="是否优先审方： ">
        <el-radio-group v-model="formData.verify_type">
          <el-radio :value="2">是</el-radio>
          <el-radio :value="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="医生封面图片： ">
        <Upload :file-src="formData['cover_img']"
                prop="cover_img"
                :token="qiniuToken"
                @handleSuccess="handleSuccess"
                @handleRemove="handleRemove" />
      </el-form-item>
      <el-form-item label="医生介绍视频： ">
        <Upload :file-src="formData['introduce_img']"
                prop="introduce_img"
                :token="qiniuToken"
                title="上传封面"
                @handleSuccess="handleSuccess"
                @handleRemove="handleRemove" />

        <Upload :file-src="formData['introduce_video']"
                prop="introduce_video"
                :token="qiniuToken"
                title="上传视频"
                type="video"
                @handleSuccess="handleSuccess"
                @handleRemove="handleRemove" />
      </el-form-item>
      <el-form-item label="可用药房： ">
        <PharmacyTable ref="pharmacyTableRefs" :drugstoreRelation="formData.drugstore_relation"></PharmacyTable>
      </el-form-item>
      <el-form-item label="咨询设置： ">
        <ServicesTable ref="servicesTableRefs" :formData="formData"></ServicesTable>
      </el-form-item>
    </el-form>

  </div>

  <el-dialog v-model="medicineDialogVisible" title="选择擅长疾病">
    <MedicineDialog ref="medicineDialogRefs"></MedicineDialog>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="medicineDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitDiagnose">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
  import Upload from "@/components/Upload/index.vue";

  const props = defineProps({
    formData: { type: Object },
    qiniuToken: { type: String }
  })
  const emit = defineEmits(['updateForm'])
  import PharmacyTable from "./PharmacyTable.vue";
  import ServicesTable from "./ServicesTable.vue";
  import MedicineDialog from "./MedicineDialog.vue";
  import { ref, onMounted, nextTick } from 'vue'
  import * as qiniu from "qiniu-js";
  import { list as diseaseListApi } from '/src/api/baseInfo/disease'
  const diseaseOptions = ref([])
  const medicineDialogVisible = ref(false)
  const medicineDialogRefs = ref()
  const pharmacyTableRefs = ref()
  const servicesTableRefs = ref()
  const doctorDiagnoseName = ref("")

  const openMedicineDialog = () => {
    medicineDialogVisible.value = true
    nextTick(() => {
      medicineDialogRefs.value.init(props.formData.doctor_diagnose)
    })
  }
  const getDiseaseOptions = async () => {
    const res = await diseaseListApi()
    diseaseOptions.value = res.data.data
  }

  const updateParentForm = () => {
    const drugstore_relation = [];
    for (const item of pharmacyTableRefs.value.multipleSelection) {
      drugstore_relation.push({
        drugstore_id: item.drugstore_id,
        drug_process_ids: item.drug_process_ids,
        is_recommend: item.is_recommend ? 1 : 2,
      })
    }
    console.log("drugstore_relation", drugstore_relation)
    emit("updateForm", "onlineInfo", "drugstore_relation", drugstore_relation)

    const servicesTable = servicesTableRefs.value.tableData;
    console.log("servicesTable", servicesTable)
    emit("updateForm", "onlineInfo", "is_graphic", servicesTable[0].enable ? 1 : 2)
    emit("updateForm", "onlineInfo", "graphic_price", servicesTable[0].price)
    emit("updateForm", "onlineInfo", "graphic_price_first", servicesTable[0].price_first)
    emit("updateForm", "onlineInfo", "graphic_display", servicesTable[0].display)
    emit("updateForm", "onlineInfo", "graphic_time", servicesTable[0].time)

    emit("updateForm", "onlineInfo", "is_video", servicesTable[1].enable ? 1 : 2)
    emit("updateForm", "onlineInfo", "video_price", servicesTable[1].price)
    emit("updateForm", "onlineInfo", "video_price_first", servicesTable[1].price_first)
    emit("updateForm", "onlineInfo", "video_display", servicesTable[1].display)
    emit("updateForm", "onlineInfo", "video_time", servicesTable[1].time)

    emit("updateForm", "onlineInfo", "is_special", servicesTable[2].enable ? 1 : 2)
    emit("updateForm", "onlineInfo", "special_price", servicesTable[2].price)
    emit("updateForm", "onlineInfo", "special_price_first", servicesTable[2].price_first)
    emit("updateForm", "onlineInfo", "special_display", servicesTable[2].display)
    emit("updateForm", "onlineInfo", "special_time", servicesTable[2].time)

    emit("updateForm", "onlineInfo", "is_quick_drug", servicesTable[3].is_quick_drug ? 1 : 2)
  }

  const submitDiagnose = () => {
    doctorDiagnoseName.value = medicineDialogRefs.value.selCategoryOptions.map(item=>item.name).join(",")
    emit("updateForm", "onlineInfo", "doctor_diagnose", medicineDialogRefs.value.selDiagnoseIds.join(","))
    medicineDialogVisible.value = false
  }

  const updatePharmacyList = () => {
    console.log("lineInfo已接收1")
    doctorDiagnoseName.value = props.formData.doctor_diagnose.map(item => item.name)
    pharmacyTableRefs.value.updatePharmacyList()
  }
  const handleRemove = (props) => {
    setTimeout(() => {
      emit("updateForm", "onlineInfo", props, "")
    }, 200)
  }
  const handleSuccess = (prop, src) => {
    emit("updateForm", "onlineInfo", prop, src)
  }
  onMounted(() => {
    getDiseaseOptions()
  })
  defineExpose({
    updateParentForm,
    updatePharmacyList
  })
</script>

<style lang="scss" scoped>

</style>
